<template>
  <div>
    <el-table :data="groupedWorks" border style="width: 100%">
      <!-- 泳道列，根据 assignee 分组 -->
      <el-table-column label="泳道" width="180">
        <template slot-scope="scope">
          <user-and-avatar :user-id="scope.row.assignee"></user-and-avatar>
        </template>
      </el-table-column>

      <!-- 状态列，根据 status 动态生成 -->
      <el-table-column
        v-for="status in dict.type.work_status"
        :key="status.value"
        :label="status.label">
        <template #default="scope">
          <div class="grid-content">
            <div
              class="work-tag"
              v-for="work in scope.row.items.filter(item => item.status === status.value)"
              :key="work.workItemId"
              @click="openWorkItem(work.workItemId)"
            >
              <!-- 根据接口返回字段做了转换，如 title 对应任务名称 -->
              <div class="work-name">{{ work.title }}</div>
              <div class="work-time">开始: {{ work.startDate }} - 结束: {{ work.dueDate }}</div>
              <div class="work-story-points">故事点: {{ work.storyPoints }}</div>
              <div class="work-priority" style="display: flex; align-items: center;">优先级: <dict-tag :options="dict.type.priority" :value="work.priority"/></div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="showItem" title="修改" width="1650px">
      <work-item :work-id="workId"></work-item>
    </el-dialog>
  </div>
</template>

<script>
import {getWorkBySprintId, listWork} from "@/api/projectUser/userWork";
import WorkItem from "@/components/Project/workItem.vue";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";

export default {
  name: "Board",
  components: {UserAndAvatar, WorkItem},
  dicts: ['work_status', 'work_type', 'priority'],
  props: {
    sprintId: {
      type: Number,
      required: true
    },
    projectId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      workId: null,
      showItem: false,
      // 原始接口返回数据
      worksRaw: [],
      // 统一状态配置
      statuses: [
        {code: '1', label: '未开始'},
        {code: '2', label: '进行中'},
        {code: '3', label: '已完成'},
        {code: '4', label: '已关闭'}
      ]
    };
  },
  computed: {
    // 根据 assignee 分组数据，如果任务没有分配，则归为 “未分配”
    groupedWorks() {
      const groups = {};
      this.worksRaw.forEach(item => {
        let assignee = item.assignee;
        if (!assignee) {
          assignee = '未分配';
        }
        if (!groups[assignee]) {
          groups[assignee] = [];
        }
        groups[assignee].push(item);
      });
      return Object.entries(groups).map(([assignee, items]) => ({assignee, items}));
    }
  },
  created() {
    this.fetchWorks();
  },
  methods: {
    openWorkItem(workId) {
      this.workId = workId
      this.showItem = true
    },
    fetchWorks() {
      listWork(this.projectId,{sprintId:this.sprintId,pageSize:100000}  )
        .then(response => {
          // 接口返回的数据直接赋值给 worksRaw
          this.worksRaw = response.rows;
        })
    }
  }
};
</script>

<style scoped lang="scss">
/* 定义颜色变量 */
$work-tag-bg: #f0f9ff;
$work-tag-hover-bg: #dbeeff;
$border-color: #dcdfe6;
$text-color: #606266;
$primary-text-color: #303133;

.grid-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 卡片之间的间距 */
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
}

/* 任务卡片样式 */
.work-tag {
  padding: 12px;
  background-color: $work-tag-bg;
  border: 1px solid $border-color;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

  &:hover {
    background-color: $work-tag-hover-bg;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .work-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
    color: $primary-text-color;
  }

  .work-time,
  .work-story-points,
  .work-priority {
    font-size: 13px;
    color: $text-color;
    line-height: 1.4;
    margin: 2px 0;
  }
}
</style>
